<template>
  <view class="head">
    <view class="bgcR"></view>
    <view class="jumpai" @tap="jumpai()">有什么想知道的，先问问我把</view>
    <view class="QRcode">
			<view v-if="docInf">
				<view class="imgT">
					{{docInf.region}}卫生所
				</view>
				
				<!-- #ifdef MP-WEIXIN -->
					<uqrcode ref="qrcode" canvas-id="qrcode" :value="val" size="236" class="uqr"></uqrcode>
				<!-- #endif -->
				
				<!-- #ifdef H5 -->
					<image style="width: 80%;" :src="getMess2"></image>
				<!-- #endif -->
				
			</view>
			<view v-else>
				<view class="imgT">
					暂无消息
				</view>
				<image style="width: 80%;" :src="getMess"></image>
			</view>
    </view>
  </view>
</template>

<script>
	import uqrcode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode'

	export default {
		name: '',
		props: ['docInf'],
		data() {
			return {
				val: uni.getStorageSync('openid') + '-' + uni.getStorageSync('use_info').nickName,
			}
		},
		methods: {
			jumpai: function () {
				uni.navigateTo({
					url: '/pages/aiDiagnosis/aiDiagnosis'
				});
			}
		},
		watch: {
			docInf: {
				handler () {
					this.val =  uni.getStorageSync('openid') + '-' + uni.getStorageSync('use_info').nickName
				},
				deep: true
			}
		},
		computed: {
			getMess () {
				return this.$url + '/state/erweima.png'
			},
			getMess2 () {
				return this.$url + '/state/erweima2.png'
			}
		}
	};
</script>

<style scoped lang='scss'>
  $wid: 85%;
  .head {
    position: relative;
    top: 0;
  }
  .bgcR {
    position: absolute;
    top: 0;
    z-index: -1;
    height: 120rpx;
    width: 100%;
    background-color: var(--borderColor);
    border-radius: 0 0 50% 50%;
  }
  .jumpai {
    position: relative;
    top: 30rpx;
    z-index: 10;
    width: $wid;
    height: 100rpx;
    border-radius: 100rpx;
    box-shadow: 2rpx 2rpx 4rpx rgba(153, 153, 153, .5),
                4rpx 4rpx 4rpx rgba(201, 197, 197, .5);
    margin: auto;
    line-height: 100rpx;
    padding-left: 30rpx;
    padding-right: 20rpx;
    background: url('http://1.12.49.243/state/discover/huatong.png') no-repeat;
    background-color: #fff;
    background-size: 60rpx;
    background-position: 95% center;
    font-size: 28rpx;
  }
  .QRcode {
    width: 80%;
    margin: auto;
    text-align: center;
    margin-top: 80rpx;
    box-shadow: 0rpx 2rpx 4rpx rgba(153, 153, 153, .5),
                0rpx 4rpx 6rpx rgba(201, 197, 197, .5);
    padding: 15rpx 0;
    border-radius: 10rpx;
    .imgT {
      margin-bottom: 10rpx;
      font-family: "方正粗黑宋简体";
    }
		.uqr {
			display: flex;
			justify-content: center;
			view {
				border: 2rpx solid #999;
			}
		}
  }
</style>